import { init, h } from 'snabbdom'
import styls from 'snabbdom/modules/style'
import eventlisteners from 'snabbdom/modules/eventlisteners'
let patch = init([
  styls,
  eventlisteners
])
let oldVnode = document.querySelector('#app')
let movies = [
  { title: '电影1', desc: '这是描述', id: 1 },
  { title: '电影2', desc: '这是描述', id: 2 },
  { title: '电影3', desc: '这是描述', id: 3 },
  { title: '电影4', desc: '这是描述', id: 4 },
  { title: '电影5', desc: '这是描述', id: 5 },
]
function render () {
  oldVnode = patch(oldVnode, view())
}
function view () {
  return h('div.container', {
    style: {
      backgroundColor: '#000',
      color: '#fff',
      width: '1000px',
      margin: '0 auto',
      padding: '0 20px'
    }
  }, [
    h('div.header', {
      style: {
        height: '60px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between'
      }
    }, [
      h('div', '电影排行榜'),
      h('div', {
        style: {
          cursor: 'pointer'
        },
        on: {
          click: addMovie
        }
      }, '添加'),
    ]),
    h('div.content', [
      h('div', {
        style: {
          display: 'flex',
          justifyContent: 'space-between'
        }
      }, [h('span', '排序'), h('span', '名称'), h('span', '描述'), h('span', '操作')])
    ]),
    h('ul.list', movies.map((movie, index) => {
      return h('li',{
        style: {
          display: 'flex',
          justifyContent: 'space-between'
        }
      }, [
        h('div', index + 1),
        h('div', movie.title),
        h('div', movie.desc),
        h('div', {
          style: {
            color: 'red',
            cursor: 'pointer'
          },
          on: {
            click: [removeMovie, movie.id]
          }
        }, '删除'),
      ])
    }))
  ])
}
function addMovie () {
  movies.push({
    title: `电影${movies.length + 1}`, desc: '这是描述', id: movies.length + 1
  })
  console.log(movies)
  render()
}
function removeMovie (id) {
  movies = movies.filter((movie) => {
    if (movie.id !== id) {
      return movie
    }
    return null
  })
  render()
}
render()
